<template>
  <!-- hpv预约信息 -->
  <view class="card hpv_info">
    <view class="hpv_info_desc">
      <text class="hpv_name">{{ hpv_info.name }}</text>
      <view class="hpv_age">
        <text v-for="(item, index) in hpv_info.describe" :key="index">{{
          item
        }}</text>
      </view>
    </view>
    <view class="hpv_price">
      ￥{{ hpv_info.price[0] }}-￥{{ hpv_info.price[1] }}
    </view>
  </view>

  <!-- 要填写的Hpv预约人表单信息 -->
  <view class="hpv_form">
    <view class="form_flex">
      <text>姓名</text>
      <input
        type="text"
        v-model="submitCombo.name"
        placeholder="请输入姓名"
        placeholder-class="input_place_style"
      />
    </view>

    <view class="form_flex">
      <text>身份证</text>
      <input
        type="text"
        v-model="submitCombo.id_card"
        placeholder="请输入身份证"
        placeholder-class="input_place_style"
      />
    </view>

    <view class="form_flex">
      <text>性别</text>
      <picker
        mode="selector"
        :range="['男', '女']"
        class="picker_box"
        @change="selectSex"
      >
        <view class="picker_place">
          <text>{{
            submitCombo.gender !== "" ? submitCombo.gender : "请选择性别"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>

    <view class="form_flex">
      <text>出生日期</text>
      <picker mode="date" class="picker_box" @change="selectDate">
        <view class="picker_place">
          <text>{{
            submitCombo.born_date !== ""
              ? submitCombo.born_date
              : "请选择出生日期"
          }}</text>
          <image class="more" src="/static/other/gengduo.svg" />
        </view>
      </picker>
    </view>

    <view class="form_flex">
      <text>手机号</text>
      <input
        type="number"
        v-model="submitCombo.phone"
        placeholder="请输入手机号"
        placeholder-class="input_place_style"
      />
    </view>
  </view>

  <!-- 待选择的hpv套餐 -->
  <view class="card hpv_taocan mt16">
    <!-- 套餐名称 -->
    <view
      class="taocan_box"
      v-for="(item, index) in hpvTaoCanNames"
      :key="index"
    >
      <text class="taocan_title">{{ item.title }}</text>
      <view class="taocan_type">
        <text
          :class="{ active: index2 === comboActive }"
          @click="selectTaocanNameFn(index2, item2.combo, item2.combo_id)"
          v-for="(item2, index2) in item.name"
          :key="index2"
        >
          {{ item2.combo }}
        </text>
      </view>
    </view>

    <!-- 套餐接种时间 -->
    <view
      class="taocan_box"
      v-for="(item, index) in hpvTaoCanTimes"
      :key="index"
    >
      <text class="taocan_title">{{ item.title }}</text>
      <view class="taocan_type">
        <text
          :class="{ active: index2 === comboTimeActive }"
          @click="selectComboTime(index2, item2.time, item2.time_id)"
          v-for="(item2, index2) in item.name"
          :key="index"
        >
          {{ item2.time }}
        </text>
      </view>
    </view>
  </view>

  <view style="height: 200rpx"></view>
  <view class="totalPriceAndSubmit">
    <!-- 总价 -->
    <view class="hpv_totalPrice">
      <text>合计: ￥{{ totalPrice.toFixed(2) }}</text>
    </view>
    <!-- 提交 -->
    <view class="hpv_submit" @click="submitComboFn">
      <text>提交</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import type {
  IhpvInfo,
  hpvTaoCanNamesItem,
  hpvTaoCanTimesItem,
} from "@/tsDataType/dataType";
import { hpvTaoCanLisApi, getComBoPriceApi, submitHpvApi } from "@/http/api";

//hpv信息
const hpv_info: IhpvInfo = reactive({
  name: "",
  _id: "",
  price: [],
  describe: [],
});

//选中套餐名称
const comboActive = ref(-1);
//套餐名称
const comboNameR = ref("");

//套餐id
const combo_idR = ref("");
const selectTaocanNameFn = (
  index: number,
  comboName: string,
  combo_id: string
) => {
  comboActive.value = index;
  comboNameR.value = comboName;
  combo_idR.value = combo_id;
};

//选中套餐接种时间
const comboTimeActive = ref(-1);
//接种时间
const comboTimeR = ref("");
//套餐的接种时间id
const comboTime_idR = ref("");
const selectComboTime = (index: number, time: string, time_id: string) => {
  comboTimeActive.value = index;
  comboTimeR.value = time;
  comboTime_idR.value = time_id;
};

//监听comboTime_idR和combo_idR值的变化
//watch(要监听谁,回调函数,配置项)
watch([comboTime_idR, combo_idR], (newV, oldV) => {
  console.log("新值：", newV);
  console.log("旧值：", oldV);
  if (newV[0].length !== 0 && newV[1].length !== 0) {
    //该调用查询套餐价格方法
    selectComboPrice(newV[0], newV[1]);
  }
});

//查询套餐价格方法
const selectComboPrice = async (comboTime_idR: string, combo_idR: string) => {
  //调用查询套餐价格接口
  try {
    const res = await getComBoPriceApi({
      hpv_id: hpv_info._id,
      combo_id: combo_idR,
      time_id: comboTime_idR,
    });

    totalPrice.value = res.data.data[0].price;
  } catch (error) {
    console.log("报错");
  }
};

//定义选中的套餐总价格
const totalPrice = ref(0);

//定义Hpv套餐名称数组
const hpvTaoCanNames = ref<hpvTaoCanNamesItem[]>([]);
//定义Hpv套餐接种时间数组
const hpvTaoCanTimes = ref<hpvTaoCanTimesItem[]>([]);

onLoad((options: any) => {
  const { name, _id, price, describe } = JSON.parse(options.obj);
  hpv_info.name = name;
  hpv_info._id = _id;
  hpv_info.price = price;
  hpv_info.describe = describe;
});

//加载hpv套餐
onMounted(() => {
  getHpvTaoCanList();
});

const { name } = toRefs(hpv_info);

//定义要提交的套餐参数
const submitCombo = reactive({
  name: "",
  //身份证
  id_card: "",
  //性别
  gender: "",
  //出生日期
  born_date: "",
  //电话
  phone: "",
  combo: comboNameR,
  ino_time: comboTimeR,
  price: totalPrice,
  hpv_name: name,
});

//获取hpv套餐方法
const getHpvTaoCanList = async () => {
  const res = await hpvTaoCanLisApi();
  console.log("hpv套餐：", res);
  hpvTaoCanNames.value = [res.data.data[0]];
  hpvTaoCanTimes.value = [res.data.data[1]];

  console.log("hpvTaoCanNames:", hpvTaoCanNames);
};

//选择性别
const selectSex = (e: any) => {
  console.log(e);
  submitCombo.gender = e.detail.value === "0" ? "男" : "女";
};

//选择日期
const selectDate = (e: any) => {
  // console.log(e);
  submitCombo.born_date = e.detail.value;
};

//提交hpv参数
const submitComboFn = async () => {
  console.log("submitCombo:", submitCombo);
  //调用提交HPV疫苗预约
  const res = await submitHpvApi(submitCombo);
  //提交成功，跳转到hpv订单页
  uni.redirectTo({
    url: "/pages/my_order/hpv/index",
  });
};
</script>

<style lang="scss">
@import "@/assets/style/public.scss";
@import "@/assets/style/form.scss";

page {
  background: #e4e4e4;
}

.hpv_info {
  display: flex;
  justify-content: space-between;

  .hpv_info_desc {
    .hpv_name {
      font-size: 18px;
    }

    .hpv_age {
      margin: 14rpx 0;
      text {
        padding: 10rpx 18rpx;
        background: #e4e4e4;
        border-radius: 8rpx;
        margin-right: 8px;
      }
    }
  }

  .hpv_price {
    color: #e6814f;
  }
}

.hpv_taocan {
  background: #fff;

  .taocan_box {
    .taocan_title {
      margin: 16rpx;
      font-size: 18px;
      font-weight: bold;
    }

    .taocan_type {
      display: flex;
      margin: 12rpx;
      text {
        padding: 10rpx 20rpx;
        background: #e4e4e4;
        margin-right: 12px;
        border-radius: 8rpx;
      }
    }
  }
}

// 底部合计
.totalPriceAndSubmit {
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 20rpx;

  .hpv_submit {
    border-radius: 10rpx;
    padding: 20rpx 50rpx;
    background: #4677e2;
    color: #fff;
  }
}

.active {
  background: #4677e2 !important;
  color: #fff !important;
}
</style>
